<template>
  <view class="login-container">
    <view class="title">
      <view>您好</view>
      <view>欢迎登录宗正安全管控平台</view>
    </view>
    <view class="login-wrap">
      <view class="form-item mb-60">
        <view class="form-label">账号</view>
        <view class="form-control">
          <input
            v-model="loginForm.username"
            maxlength="30"
            class="input"
            @focus="inputFocus = true"
            @blur="inputFocus = false"
            placeholder="请输入账号"
            placeholder-style="color:#BBBBBB"
          />
        </view>
      </view>

      <view class="form-item mb-40">
        <view class="form-label">密码</view>
        <view class="form-control flex items-center">
          <view class="flex-auto">
            <input
              v-model="loginForm.password"
              placeholder="请输入密码"
              :type="pwdType"
              class="input"
              maxlength="20"
              @focus="inputFocus = true"
              @blur="inputFocus = false"
              placeholder-style="color:#BBBBBB"
            />
          </view>
          <view class="flex flex-center" style="width: 60rpx; height: 80rpx" @click="changePwdType">
            <u-icon :name="pwdType === 'password' ? 'eye-fill' : 'eye-off'" color="#999999" size="22"></u-icon>
          </view>
        </view>
      </view>

      <view class="form-item">
        <u-checkbox-group v-model="checkboxValue" placement="column">
          <u-checkbox
            v-for="(item, index) in checkboxList1"
            activeColor="#2AC0C8"
            :key="index"
            :label="item.label"
            :name="item.value"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="btn-login" @click="handleLogin()">登录</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { setToken } from '../utils/auth'
import { login } from '@/api/login.js'
import { isRelogin } from '@/utils/request'
import UIcon from '@/uni_modules/uview-ui/components/u-icon/u-icon.vue'
export default {
  components: { UIcon },
  data() {
    return {
      checkboxValue: [],
      checkboxList1: [
        {
          label: '记住我',
          value: true
        }
      ],
      pwdType: 'password',
      codeUrl: '',
      captchaEnabled: true,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: '',
        password: '',
        phoneNumber: '',
        smsCode: ''
      },
      inputFocus: false,
      isRemember: false,
      networkStatus: uni.getStorageSync('networkStatus'), // 0 外网默认  1 内网
      toggleBtnDisabled: false,
      loginType: 1,
      status: false,
      timer: null
    }
  },
  computed: {
    ...mapGetters(['isLocked', 'expireTime'])
  },
  mounted() {
    isRelogin.show = false
    this.isRemember = uni.getStorageSync('isRemember') || false
    if (this.isRemember) {
      this.loginForm.username = uni.getStorageSync('username')
      this.loginForm.password = uni.getStorageSync('password')
      this.checkboxValue = [true]
    }
    this.networkStatus = uni.getStorageSync('networkStatus')
    if (uni.getStorageSync('toggleNetworkStatus') == 1) {
      uni.showToast({
        title: `已切换为${this.networkStatus == 1 ? '内' : '外'}网`,
        icon: 'none',
        success: () => {
          uni.setStorageSync('toggleNetworkStatus', JSON.stringify(0))
        }
      })
    }
  },
  onShow() {
    // #ifdef APP-PLUS
    setTimeout(() => {
      if (process.env.NODE_ENV !== 'development') {
        // this.$store.dispatch('GetUpgradeInfo')
      }
    }, 500)
    // #endif
  },
  methods: {
    changePwdType() {
      this.pwdType = this.pwdType === 'password' ? 'type' : 'password'
    },
    toggleNetworkStatus() {
      if (this.toggleBtnDisabled) {
        return
      }
      this.toggleBtnDisabled = true
      this.networkStatus = this.networkStatus == 1 ? 0 : 1
      uni.setStorageSync('networkStatus', JSON.stringify(this.networkStatus))
      uni.setStorageSync('toggleNetworkStatus', JSON.stringify(1))
      // #ifdef APP-PLUS
      plus.runtime.restart()
      // #endif
      // #ifdef H5
      window.location.reload()
      // #endif
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === '') {
        this.$modal.showToast('请输入账号')
      } else if (this.loginForm.password === '') {
        this.$modal.showToast('请输入密码')
      } else {
        this.$modal.loading('登录中，请耐心等待...')
        this.pwdLogin()
      }
    },
    // 密码登录
    async pwdLogin() {
      login(this.loginForm.username, this.loginForm.password)
        .then((res) => {
          if (res.data) {
            setToken(res.data.token)
            this.$store.commit('SET_TOKEN', res.data.token)
            this.$store.commit('SET_EXPIRED', false)
            this.loginSuccess()
          }
        })
        .catch((err) => {
          const { code, msg } = err
          if (code === 5002 || code === 5003) {
            this.$modal.confirm(msg).then(() => {
              uni.navigateTo({
                url: `/pages/change-pwd?account=${this.loginForm.username}&password=${this.loginForm.password}`,
                events: {
                  'reset:pwd:success': () => {
                    this.loginForm.password = ''
                  }
                }
              })
            })
          }
        })
        .finally(() => {
          this.$modal.closeLoading()
        })
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      this.isRemember = !!this.checkboxValue.length
      if (this.isRemember) {
        uni.setStorageSync('username', this.loginForm.username)
        uni.setStorageSync('password', this.loginForm.password)
        uni.setStorageSync('isRemember', this.isRemember)
      } else {
        uni.removeStorageSync('username')
        uni.removeStorageSync('password')
        uni.removeStorageSync('isRemember')
      }
      // 设置用户信息
      this.$store.dispatch('GetInfo').then((res) => {
        this.$store.dispatch('getImeiInfo')
        if (!res) {
          this.$tab.reLaunch('/pages/mine/index?isShow=true')
        } else {
          this.$tab.reLaunch('/pages/messages/index')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  background: #fff url('@/static/images/login/bg-login.png') top center no-repeat;
  background-size: 100% 730rpx;
  min-height: 100vh;
  padding-top: 82px;
  .title {
    padding-left: 70rpx;
    height: 88rpx;
    margin-bottom: 170rpx;
    view {
      font-weight: 400;
      font-size: 36rpx;
      color: #333333;
      line-height: 44rpx;
    }
  }
  .login-wrap {
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #ffffff;
    min-height: calc(100vh - 320rpx);
    padding: 60rpx 76rpx 20rpx;
  }
  .form-label {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    text-align: left;
  }
  .form-control {
    border-bottom: 1px solid #f1f1f5;
    .input {
      background: transparent;
      border: 0 none;
      font-size: 30rpx;
      width: 100%;
      display: block;
      height: 90rpx;
    }
  }
  .btn-login {
    margin-top: 100rpx;
    height: 100rpx;
    background: #2ac0c8;
    font-weight: 500;
    font-size: 36rpx;
    line-height: 100rpx;
    border-radius: 100rpx;
    color: #ffffff;
    text-align: center;
  }
}
</style>
